<template>
    <div class="new-page" :style="`min-height: ${pageMinHeight}px`">
        <div class="table_box">
            <div class="pageHeader">
                <div class="pageHeader_icon" @click="back()">
                    <a-icon type="left" />
                </div>
                <div class="pageHeader_title">
                    <span>预警记录</span>
                </div>
            </div>
            <div class="realTime_box">
                <div class="realTime_title">
                    <span class="icon iconfont icon-yujing-yujingjilu"></span>
                    <span class="desc">预警记录</span>
                </div>
                <a-table :columns="columns" :rowKey="(record) => record.id" :data-source="earlyAlarms_data" :pagination="false"
                    @change="handleTableChange">
                    <div slot="level" slot-scope="text, record">
                      <div :class="level[record.level].c">
                          <span class="iconfont icon-dianchijingbao"></span>
                          <span style="margin-left: 5px;">{{level[record.level].n}}</span>
                      </div>
                    </div>
                </a-table>
            </div>
            <div class="realTime_box">
                <div class="realTime_title">
                    <span class="icon iconfont icon-yujing-yujingzhuisu"></span>
                    <span class="desc">预警追溯</span>
                </div>
                <div class="charts_trend">
                    <div id="charts_trend" style="width: 100%; height: 500px"></div>
                </div>
            </div>
            <div class="realTime_box">
                <div class="select_box">
                    <span :class="{active:status==1}" @click="status=1">预警数据</span>
                    <span :class="{active:status==2}" @click="status=2">离散度分析</span>
                </div>
                <div class="EarlyWarning_data" v-if="status==1">
                    <div class="table_header">
                      <div class="search">
                          <a-select default-value="jack" style="width: 130px;margin-right: 20px;" @change="handleChange">
                            <a-select-option value="jack">
                              1#电池簇>3#电池模组
                            </a-select-option>
                            <a-select-option value="lucy">
                              2
                            </a-select-option>
                          </a-select>
                          <a-select default-value="jack" style="width: 130px;margin-right: 20px;" @change="handleChange">
                            <a-select-option value="jack">
                              电压（V）
                            </a-select-option>
                            <a-select-option value="lucy">
                              2
                            </a-select-option>
                          </a-select>
                      </div>
                    </div>
                    <a-table :columns="columns3" :rowKey="(record,i) => i" :data-source="[...data,...data,...data]" :pagination="pagination">
                    </a-table>
                </div>
                <div class=""  v-if="status==2">
                    <div class="" style="display: flex;">
                        <div class="realTime_box" style="flex: 1;margin-right: 10px;">
                            <div class="realTime_title">
                                <span class="icon iconfont icon-dianchiculisanfenxi"></span>
                                <span class="desc">电池簇日离散度分析</span>
                            </div>
                            <div class="search" style="text-align: left;padding-left: 20px;margin-top: 20px;margin-bottom: 20px;">
                                <a-cascader :options="options" change-on-select @change="onChange" />
                            </div>
                            <div class="charts_bubble">
                                <div id="charts_bubble" style="width: 100%; height: 300px"></div>
                            </div>
                        </div>
                        <div class="realTime_box" style="flex: 2;">
                            <div class="realTime_title">
                                <span class="icon iconfont icon-dianchimozulisanfenxi"></span>
                                <span class="desc">电池簇模组日离散分析</span>
                            </div>
                            <div class="search" style="text-align: left;padding-left: 20px;margin-top: 20px;margin-bottom: 20px;">
                                <a-cascader :options="options" change-on-select @change="onChange" />
                            </div>
                            <div style="display: flex;">
                                <div style="flex: 1;">
                                    <div id="charts_module1" style="width: 100%; height: 300px"></div>
                                </div>
                                <div style="flex: 1;">
                                    <div id="charts_module2" style="width: 100%; height: 300px"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="realTime_box">
                        <div class="realTime_title">
                            <span class="icon iconfont icon-dianxinbianhuaqushi"></span>
                            <span class="desc">电芯变化趋势</span>
                        </div>
                        <div class="search" style="text-align: left;padding-left: 20px;margin-top: 20px;margin-bottom: 20px;">
                            <a-cascader :options="options" change-on-select @change="onChange" />
                        </div>
                        <div style="display: flex;">
                            <div style="flex: 1;">
                                <div id="charts_module3" style="width: 100%; height: 300px"></div>
                            </div>
                            <div style="flex: 1;">
                                <div id="charts_module4" style="width: 100%; height: 300px"></div>
                            </div>
                            <div style="flex: 1;">
                                <div id="charts_module5" style="width: 100%; height: 300px"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            
            
            
            <a-modal v-model="visible" title="充放电记录" on-ok="handleOk" width="60%">
                <template slot="footer">
                    <a-button key="back" @click="visible=false">
                        关闭
                    </a-button>
                </template>
                <div class="form_box">
                    <a-table :columns="columns5" :rowKey="(record) => record.id" :data-source="data" :pagination="false"
                       :loading="loading" @change="handleTableChange">
                    </a-table>
                </div>
            </a-modal>
        </div>
    </div>
</template>

<script>
    import {
        mapState
    } from "vuex";
    import {
        gets,
        get,
        del
    } from "@/services";
    import {
        getSearchCriteria
    } from "@/utils/util"
    import echarts from 'echarts'
    const rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      },
      onSelect: (record, selected, selectedRows) => {
        console.log(record, selected, selectedRows);
      },
      onSelectAll: (selected, selectedRows, changeRows) => {
        console.log(selected, selectedRows, changeRows);
      },
    };
    export default {
        name: "Demo",
        data() {
            return {
                level:{
                    normal:{
                        c:'level1',
                        n:'正常'
                    },
                    light:{
                        c:'level2',
                        n:'轻度'
                    },
                    moderate:{
                        c:'level3',
                        n:'中度'
                    },
                    severe:{
                        c:'level4',
                        n:'重度'
                    },
                },
                columns: [
                    {title: "预警时间",dataIndex: "created_at",key: "created_at",className:'column-white'},
                    {title: "储能单元",key: "e_s_unit",dataIndex: "e_s_cluster.e_s_unit.name",className:'column-white'},
                    {title: "运维建议",key: "suggestion",dataIndex: "suggestion",className:'column-white'},
                    {title: "诊断项",key: "item",dataIndex: "item",className:'column-white'},
                    {title: "定位",key: "e_s_cluster.name",dataIndex: "e_s_cluster.name",className:'column-white'},
                    {title: "等级",key: "level",dataIndex: "level",className:'column-white',scopedSlots: { customRender: "level" }},
                    {title: "运维状态",key: "operation",dataIndex: "operation",className:'column-white'},
                    {title: "预计效果",key: "effect",dataIndex: "effect",className:'column-white'}
                ],
                columns3:[
                    {title: "采集时间",dataIndex: "name1",key: "name1",className:'column-white'},
                    {title: "电池簇电压",dataIndex: "name2",key: "name2",className:'column-white'},
                    {title: "1#电池模组",dataIndex: "name3",key: "name3",className:'column-white'},
                    {title: "2#电池模组",dataIndex: "name4",key: "name4",className:'column-white'},
                    {title: "3#电池模组",dataIndex: "name5",key: "name5",className:'column-white'},
                    {title: "4#电池模组",dataIndex: "name6",key: "name6",className:'column-white'},
                    {title: "5#电池模组",dataIndex: "name6",key: "name6",className:'column-white'},
                    {title: "6#电池模组",dataIndex: "name6",key: "name6",className:'column-white'}
                ],
                columns4:[
                    {title: "告警名称",dataIndex: "name1",key: "name1",className:'column-white'},
                    {title: "告警时间",dataIndex: "name2",key: "name2",className:'column-white'},
                    {title: "持续时长",dataIndex: "name3",key: "name3",className:'column-white'},
                    {title: "定位",dataIndex: "name4",key: "name4",className:'column-white'},
                    {title: "告警等级",dataIndex: "name5",key: "name5",className:'column-white'}
                ],
                columns5:[
                    {title: "电池簇",dataIndex: "name1",key: "name1"},
                    {title: "状态",dataIndex: "name2",key: "name2"},
                    {title: "开始时间",dataIndex: "name3",key: "name3"},
                    {title: "持续时长",dataIndex: "name4",key: "name4"},
                    {title: "累计电量",dataIndex: "name5",key: "name5"}
                ],
                visible: false,
                visible2: false,
                status:1,
                rowSelection,
                form: {},
                
                labelCol: {
                    span: 7
                },
                wrapperCol: {
                    span: 11
                },
                rules: {
                    name: [{
                        required: true,
                        message: "请输入角色名称",
                        trigger: "blur",
                    }, ],
                    role_id: [{

                        required: true,
                        message: "请选择角色",
                        trigger: "change",
                    }, ],
                    enterprise_id: [{

                        required: true,
                        message: "请选择企业",
                        trigger: "change",
                    }, ],
                    mobile: [{
                        required: true,
                        message: "请输入账号电话",
                        trigger: "blur",
                    }, ],
                    password: [{
                        required: true,
                        message: "请输入账号密码",
                        trigger: "blur",
                    }, ]
                },
                pagination: {
                    pageSize: 10,
                },
                searchData: {
                    name: ''
                },
                loading: false,
                data: [],
                earlyAlarms_data:[],
                options: [
                        {
                          value: 'zhejiang',
                          label: 'Zhejiang',
                          children: [
                            {
                              value: 'hangzhou',
                              label: 'Hangzhou',
                              children: [
                                {
                                  value: 'xihu',
                                  label: 'West Lake',
                                },
                              ],
                            },
                          ],
                        },
                        {
                          value: 'jiangsu',
                          label: 'Jiangsu',
                          children: [
                            {
                              value: 'nanjing',
                              label: 'Nanjing',
                              children: [
                                {
                                  value: 'zhonghuamen',
                                  label: 'Zhong Hua Men',
                                },
                              ],
                            },
                          ],
                        },
                      ],
            };
        },
        watch:{
          status:function(nV,oV){
              if(nV==2){
                  console.log(this);
                  setTimeout(()=>{
                    this.init()
                  })
              }
          }  
        },
        computed: {
            ...mapState("setting", ["pageMinHeight"]),
        },
        created() {
            let id = this.$route.query.id;
            get(id,'earlyAlarms').then(({data})=>{
                if(data.code==20000){
                    this.earlyAlarms_data = [data.data]
                }
            })
            this.fetch({
                limit: 10
            })
        },
        mounted() {
            this.init_nedw_trend("charts_trend", 
              { 
                "future": [{
                    "h": 0.9723,
                    "l": 0.9587,
                    "date": "2023-06-02",
                    "level": "\u6b63\u5e38",
                    "value": 0.965,
                    "Current": null,
                    "Voltage": null
                }, {
                    "h": 0.9726,
                    "l": 0.9566,
                    "date": "2023-06-03",
                    "level": "\u6b63\u5e38",
                    "value": 0.9642,
                    "Current": null,
                    "Voltage": null
                }, {
                    "h": 0.9762,
                    "l": 0.9573,
                    "date": "2023-06-04",
                    "level": "\u6b63\u5e38",
                    "value": 0.9658,
                    "Current": null,
                    "Voltage": null
                }, {
                    "h": 0.9741,
                    "l": 0.948,
                    "date": "2023-06-05",
                    "level": "\u6b63\u5e38",
                    "value": 0.9599,
                    "Current": null,
                    "Voltage": null
                }, {
                    "h": 0.9821,
                    "l": 0.9446,
                    "date": "2023-06-06",
                    "level": "\u6b63\u5e38",
                    "value": 0.9616,
                    "Current": null,
                    "Voltage": null
                }, {
                    "h": 0.9798,
                    "l": 0.9342,
                    "date": "2023-06-07",
                    "level": "\u6b63\u5e38",
                    "value": 0.9542,
                    "Current": null,
                    "Voltage": null
                }, {
                    "h": 0.9863,
                    "l": 0.9271,
                    "date": "2023-06-08",
                    "level": "\u6b63\u5e38",
                    "value": 0.9532,
                    "Current": null,
                    "Voltage": null
                }, {
                    "h": 1,
                    "l": 0.9288,
                    "date": "2023-06-09",
                    "level": "\u6b63\u5e38",
                    "value": 0.9619,
                    "Current": null,
                    "Voltage": null
                }, {
                    "h": 1,
                    "l": 0.9194,
                    "date": "2023-06-10",
                    "level": "\u6b63\u5e38",
                    "value": 0.961,
                    "Current": null,
                    "Voltage": null
                }, {
                    "h": 1,
                    "l": 0.9134,
                    "date": "2023-06-11",
                    "level": "\u6b63\u5e38",
                    "value": 0.9626,
                    "Current": null,
                    "Voltage": null
                }, {
                    "h": 1,
                    "l": 0.8998,
                    "date": "2023-06-12",
                    "level": "\u6b63\u5e38",
                    "value": 0.9568,
                    "Current": null,
                    "Voltage": null
                }, {
                    "h": 1,
                    "l": 0.8906,
                    "date": "2023-06-13",
                    "level": "\u6b63\u5e38",
                    "value": 0.9584,
                    "Current": null,
                    "Voltage": null
                }, {
                    "h": 1,
                    "l": 0.8737,
                    "date": "2023-06-14",
                    "level": "\u6b63\u5e38",
                    "value": 0.951,
                    "Current": null,
                    "Voltage": null
                }, {
                    "h": 1,
                    "l": 0.8631,
                    "date": "2023-06-15",
                    "level": "\u6b63\u5e38",
                    "value": 0.95,
                    "Current": null,
                    "Voltage": null
                }, {
                    "h": 1,
                    "l": 0.8619,
                    "date": "2023-06-16",
                    "level": "\u6b63\u5e38",
                    "value": 0.9587,
                    "Current": null,
                    "Voltage": null
                }, {
                    "h": 1,
                    "l": 0.8479,
                    "date": "2023-06-17",
                    "level": "\u6b63\u5e38",
                    "value": 0.9579,
                    "Current": null,
                    "Voltage": null
                }, {
                    "h": 1,
                    "l": 0.8399,
                    "date": "2023-06-18",
                    "level": "\u6b63\u5e38",
                    "value": 0.9595,
                    "Current": null,
                    "Voltage": null
                }, {
                    "h": 1,
                    "l": 0.8217,
                    "date": "2023-06-19",
                    "level": "\u6b63\u5e38",
                    "value": 0.9536,
                    "Current": null,
                    "Voltage": null
                }, {
                    "h": 1,
                    "l": 0.8154,
                    "date": "2023-06-20",
                    "level": "\u6b63\u5e38",
                    "value": 0.9553,
                    "Current": null,
                    "Voltage": null
                }, {
                    "h": 1,
                    "l": 0.7966,
                    "date": "2023-06-21",
                    "level": "\u6b63\u5e38",
                    "value": 0.9479,
                    "Current": null,
                    "Voltage": null
                }, {
                    "h": 1,
                    "l": 0.7824,
                    "date": "2023-06-22",
                    "level": "\u6b63\u5e38",
                    "value": 0.9469,
                    "Current": null,
                    "Voltage": null
                }, {
                    "h": 1,
                    "l": 0.7785,
                    "date": "2023-06-23",
                    "level": "\u6b63\u5e38",
                    "value": 0.9556,
                    "Current": null,
                    "Voltage": null
                }, {
                    "h": 1,
                    "l": 0.7658,
                    "date": "2023-06-24",
                    "level": "\u6b63\u5e38",
                    "value": 0.9547,
                    "Current": null,
                    "Voltage": null
                }, {
                    "h": 1,
                    "l": 0.7542,
                    "date": "2023-06-25",
                    "level": "\u6b63\u5e38",
                    "value": 0.9563,
                    "Current": null,
                    "Voltage": null
                }, {
                    "h": 1,
                    "l": 0.7387,
                    "date": "2023-06-26",
                    "level": "\u6b63\u5e38",
                    "value": 0.9505,
                    "Current": null,
                    "Voltage": null
                }, {
                    "h": 1,
                    "l": 0.7249,
                    "date": "2023-06-27",
                    "level": "\u6b63\u5e38",
                    "value": 0.9522,
                    "Current": null,
                    "Voltage": null
                }, {
                    "h": 1,
                    "l": 0.7064,
                    "date": "2023-06-28",
                    "level": "\u6b63\u5e38",
                    "value": 0.9447,
                    "Current": null,
                    "Voltage": null
                }, {
                    "h": 1,
                    "l": 0.6964,
                    "date": "2023-06-29",
                    "level": "\u6b63\u5e38",
                    "value": 0.9437,
                    "Current": null,
                    "Voltage": null
                }, {
                    "h": 1,
                    "l": 0.6866,
                    "date": "2023-06-30",
                    "level": "\u6b63\u5e38",
                    "value": 0.9524,
                    "Current": null,
                    "Voltage": null
                }],
                "history": [{
                    "date": "2023-05-01",
                    "level": "\u6b63\u5e38",
                    "value": 0.9626,
                    "Current": 8.8094,
                    "Voltage": 363.9638
                }, {
                    "date": "2023-05-02",
                    "level": "\u6b63\u5e38",
                    "value": 0.9728,
                    "Current": 8.8549,
                    "Voltage": 363.9695
                }, {
                    "date": "2023-05-03",
                    "level": "\u6b63\u5e38",
                    "value": 0.9735,
                    "Current": 8.8549,
                    "Voltage": 363.9695
                }, {
                    "date": "2023-05-04",
                    "level": "\u6b63\u5e38",
                    "value": 0.9766,
                    "Current": 8.8549,
                    "Voltage": 363.9695
                }, {
                    "date": "2023-05-05",
                    "level": "\u6b63\u5e38",
                    "value": 0.9723,
                    "Current": 7.0753,
                    "Voltage": 363.848
                }, {
                    "date": "2023-05-06",
                    "level": "\u6b63\u5e38",
                    "value": 0.97,
                    "Current": 7.0753,
                    "Voltage": 363.848
                }, {
                    "date": "2023-05-07",
                    "level": "\u6b63\u5e38",
                    "value": 0.9587,
                    "Current": 8.8675,
                    "Voltage": 364.0266
                }, {
                    "date": "2023-05-08",
                    "level": "\u6b63\u5e38",
                    "value": 0.9537,
                    "Current": 8.8614,
                    "Voltage": 364.1474
                }, {
                    "date": "2023-05-09",
                    "level": "\u6b63\u5e38",
                    "value": 0.9585,
                    "Current": 8.8614,
                    "Voltage": 364.1474
                }, {
                    "date": "2023-05-10",
                    "level": "\u6b63\u5e38",
                    "value": 0.9548,
                    "Current": 8.5914,
                    "Voltage": 371.2813
                }, {
                    "date": "2023-05-11",
                    "level": "\u6b63\u5e38",
                    "value": 0.9536,
                    "Current": 8.5914,
                    "Voltage": 371.2813
                }, {
                    "date": "2023-05-12",
                    "level": "\u6b63\u5e38",
                    "value": 0.9449,
                    "Current": 8.5914,
                    "Voltage": 371.2813
                }, {
                    "date": "2023-05-13",
                    "level": "\u6b63\u5e38",
                    "value": 0.9437,
                    "Current": 8.5914,
                    "Voltage": 371.2813
                }, {
                    "date": "2023-05-14",
                    "level": "\u6b63\u5e38",
                    "value": 0.9335,
                    "Current": 8.4243,
                    "Voltage": 381.5453
                }, {
                    "date": "2023-05-15",
                    "level": "\u6b63\u5e38",
                    "value": 0.9377,
                    "Current": 8.4243,
                    "Voltage": 381.5453
                }, {
                    "date": "2023-05-16",
                    "level": "\u6b63\u5e38",
                    "value": 0.9517,
                    "Current": 8.4654,
                    "Voltage": 374.8307
                }, {
                    "date": "2023-05-17",
                    "level": "\u6b63\u5e38",
                    "value": 0.956,
                    "Current": 8.7657,
                    "Voltage": 368.5197
                }, {
                    "date": "2023-05-18",
                    "level": "\u6b63\u5e38",
                    "value": 0.9629,
                    "Current": 8.5529,
                    "Voltage": 373.8167
                }, {
                    "date": "2023-05-19",
                    "level": "\u6b63\u5e38",
                    "value": 0.9593,
                    "Current": 8.8417,
                    "Voltage": 358.1391
                }, {
                    "date": "2023-05-20",
                    "level": "\u6b63\u5e38",
                    "value": 0.9633,
                    "Current": 8.8417,
                    "Voltage": 358.1391
                }, {
                    "date": "2023-05-21",
                    "level": "\u6b63\u5e38",
                    "value": 0.9582,
                    "Current": 8.8109,
                    "Voltage": 359.1583
                }, {
                    "date": "2023-05-22",
                    "level": "\u6b63\u5e38",
                    "value": 0.9594,
                    "Current": 8.9622,
                    "Voltage": 359.4987
                }, {
                    "date": "2023-05-23",
                    "level": "\u6b63\u5e38",
                    "value": 0.9682,
                    "Current": 8.8746,
                    "Voltage": 363.7559
                }, {
                    "date": "2023-05-24",
                    "level": "\u6b63\u5e38",
                    "value": 0.9673,
                    "Current": 8.865,
                    "Voltage": 364.0652
                }, {
                    "date": "2023-05-25",
                    "level": "\u6b63\u5e38",
                    "value": 0.9689,
                    "Current": 8.959,
                    "Voltage": 361.006
                }, {
                    "date": "2023-05-26",
                    "level": "\u6b63\u5e38",
                    "value": 0.9631,
                    "Current": 8.8377,
                    "Voltage": 364.9366
                }, {
                    "date": "2023-05-27",
                    "level": "\u6b63\u5e38",
                    "value": 0.9647,
                    "Current": 8.5473,
                    "Voltage": 374.0839
                }, {
                    "date": "2023-05-28",
                    "level": "\u6b63\u5e38",
                    "value": 0.9573,
                    "Current": 8.5168,
                    "Voltage": 375.8393
                }, {
                    "date": "2023-06-01",
                    "level": "\u6b63\u5e38",
                    "value": 0.9563,
                    "Current": null,
                    "Voltage": null
                }]
              }
          );
            this.status=2
        },
        methods: {
            back(){
              window.history.go(-1)  
            },
            onChange(value) {
                  console.log(value);
                },
            init(){
              console.log(999999999);  
              this.init_charts_bubble("charts_bubble")
              this.init_charts_module1("charts_module1")
              this.init_charts_module2("charts_module2")
              this.init_charts_module3("charts_module3")
              this.init_charts_module4("charts_module4")
              this.init_charts_module5("charts_module5")
            },
            openRecordList(){
                this.visible= true
            },
            init_charts_module1(id){
                let option = {
                  title: {
                    text:'离散度标准差',
                    textStyle:{
                        fontWeight: 400,
                        fontSize: 13,
                        color: '#333333'
                    },
                    left:'3%'
                  },
                  color:['#206EF7', '#00DCD8', '#3E20F7', '#F76720', '#3EBB55', '#FFE300'],
                  tooltip: {
                    trigger: 'axis'
                  },
                  legend: {
                    data: ['1#', '2#', '3#', '4#', '5#', '6#'],
                    right: '4%',
                  },
                  grid: {
                    right: '4%',
                    left: '2%',
                    top: '12%',
                    bottom:'8%',
                    containLabel: true
                  },
                  xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    splitLine: {
                      lineStyle: {
                        type: 'dashed',
                        color:'#F7F8FA'
                      }
                    },
                    axisLine:{
                      lineStyle: {
                        color:'#C3CBD5'
                      }
                    }
                  },
                  yAxis: {
                    type: 'value',
                    splitLine: {
                      lineStyle: {
                        type: 'dashed',
                        color:'#F7F8FA'
                      }
                    },
                    axisLine:{
                      show:false,
                      lineStyle: {
                        color:'#C3CBD5'
                      }
                    },
                    axisTick:{
                        show:false,
                    },
                  },
                  series: [
                    {
                      name: '1#',
                      type: 'line',
                      stack: 'Total',
                      showSymbol: false,
                      data: [0, 200, 0, 0, 90, 230, 0],
                      smooth: true
                    },
                    {
                      name: '2#',
                      type: 'line',
                      stack: 'Total',
                      showSymbol: false,
                      data: [0, 210, 0, 0, 290, 330, 0],
                      smooth: true
                    },
                    {
                      name: '3#',
                      type: 'line',
                      stack: 'Total',
                      showSymbol: false,
                      data: [0, 220, 0, 0, 190, 330, 0],
                      smooth: true
                    },
                    {
                      name: '4#',
                      type: 'line',
                      stack: 'Total',
                      showSymbol: false,
                      data: [0, 230, 0, 0, 390, 330, 0],
                      smooth: true
                    },
                    {
                      name: '5#',
                      type: 'line',
                      stack: 'Total',
                      showSymbol: false,
                      data: [0, 240, 0, 0, 290, 350, 0],
                      smooth: true
                    }
                  ]
                };
                var myChart = this.$echarts.init(document.getElementById(id));
                myChart.setOption(option);
                window.addEventListener("resize", function () {
                  myChart.resize();
                });
            },
            init_charts_module2(id){
                console.log(999,echarts.dataTool.prepareBoxplotData);
                let arrr = [
                       [19747,
                    50024,
                    64617,
                    86808,
                    159949,],
                       [23635,
                    46878,
                    58095,
                    84877,
                    158312,],
                    [21543,
                    47623,
                    61315.5,
                    85947,
                    159978,],
                    [18679,
                    46646,
                    59842,
                    84798.25,
                    159980,],
                    [15202,
                    43073.25,
                    55168.5,
                    80136.25,
                    159825,]
                ]
                let option = {
                title: {
                    text:'离散度',
                    textStyle:{
                        fontWeight: 400,
                        fontSize: 13,
                        color: '#333333'
                    },
                    left:'3%'
                },
                tooltip: {
                    trigger: 'item',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    right: '4%',
                    left: '10%',
                    top: '12%',
                    bottom:'15%',
                },
                xAxis: {
                    type: 'category',
                    data: ['Bottom','Low','Middle','High','Top'],

                    nameTextStyle: {
                        color: '#3259B8',
                        fontSize: 14,
                        
                    },
                    splitLine: {
                      lineStyle: {
                        type: 'dashed',
                        color:'#F7F8FA'
                      }
                    },
                    axisLine:{
                      lineStyle: {
                        color:'#C3CBD5'
                      }
                    }
                },
                
                yAxis: {
                    type: 'value',
                   splitLine: {
                     lineStyle: {
                       type: 'dashed',
                       color:'#F7F8FA'
                     }
                   },
                   axisLine:{
                     show:false,
                     lineStyle: {
                       color:'#C3CBD5'
                     }
                   },
                   axisTick:{
                       show:false,
                   },
                    
                },
                series: [
                    {
                    name: 'boxplot',
                    type: 'pictorialBar',
                    symbolPosition: 'end',
                    symbolSize: 8,
                    data: [[0, 19747]]
                },{
                name: 'boxplot',
                type: 'boxplot',
                data: [
                           [19747,
                    50024,
                    64617,
                    86808,
                    159949,],
                       [23635,
                    46878,
                    58095,
                    84877,
                    158312,],
                    [21543,
                    47623,
                    61315.5,
                    85947,
                    159978,],
                    [18679,
                    46646,
                    59842,
                    84798.25,
                    159980,],
                    [15202,
                    43073.25,
                    55168.5,
                    80136.25,
                    159825,]
                    ],
                    itemStyle: {
                        normal:{
                            borderColor: '#206EF7',
                        borderWidth:2,
                    }
                    },
                    tooltip: {
                        formatter: function(param) {
                            return [

                                '5: ' + param.data[5]  ,
                                '4: ' + param.data[4],
                                '3: ' + param.data[3],
                                '2: ' + param.data[2],
                                '1: ' + param.data[1]
                            ].join('<br/>')
                        }
                    }
            },

                    ]
                };
                var myChart = this.$echarts.init(document.getElementById(id));
                myChart.setOption(option);
                window.addEventListener("resize", function () {
                  myChart.resize();
                });
            },
            init_charts_module3(id){
                let option = {
                    title: {
                        text:'离散度标准差',
                        textStyle:{
                            fontWeight: 400,
                            fontSize: 13,
                            color: '#333333'
                        },
                        left:'3%'
                    },
                    color:['#206EF7'],
                    grid: {
                        right: '4%',
                        left: '10%',
                        top: '13%',
                        bottom:'15%',
                    },
                    xAxis: {
                        splitLine: {
                          lineStyle: {
                            type: 'dashed',
                            color:'#F7F8FA'
                          }
                        },
                        axisLine:{
                          lineStyle: {
                            color:'#C3CBD5'
                          }
                        }
                    },
                      yAxis: {
                          splitLine: {
                            lineStyle: {
                              type: 'dashed',
                              color:'#F7F8FA'
                            }
                          },
                          axisLine:{
                            show:false,
                            lineStyle: {
                              color:'#C3CBD5'
                            }
                          },
                          axisTick:{
                              show:false,
                          },
                      },
                      series: [
                        {
                          data: [
                            [40, 20],
                            [10, 40],
                            [50, 100],
                            [30, 20]
                          ],
                          type: 'line'
                        }
                      ]
                    };
                var myChart = this.$echarts.init(document.getElementById(id));
                myChart.setOption(option);
                window.addEventListener("resize", function () {
                  myChart.resize();
                });
            },
            init_charts_module4(id){
                const dataAll = [
                  [
                    [10.0, 8.04],
                    [8.0, 6.95],
                    [13.0, 7.58],
                    [9.0, 8.81],
                    [11.0, 8.33],
                    [14.0, 9.96],
                    [6.0, 7.24],
                    [4.0, 4.26],
                    [12.0, 10.84],
                    [7.0, 4.82],
                    [5.0, 5.68]
                  ],
                  [
                    [10.0, 9.14],
                    [8.0, 8.14],
                    [13.0, 8.74],
                    [9.0, 8.77],
                    [11.0, 9.26],
                    [14.0, 8.1],
                    [6.0, 6.13],
                    [4.0, 3.1],
                    [12.0, 9.13],
                    [7.0, 7.26],
                    [5.0, 4.74]
                  ],
                  [
                    [10.0, 7.46],
                    [8.0, 6.77],
                    [13.0, 12.74],
                    [9.0, 7.11],
                    [11.0, 7.81],
                    [14.0, 8.84],
                    [6.0, 6.08],
                    [4.0, 5.39],
                    [12.0, 8.15],
                    [7.0, 6.42],
                    [5.0, 5.73]
                  ],
                  [
                    [8.0, 6.58],
                    [8.0, 5.76],
                    [8.0, 7.71],
                    [8.0, 8.84],
                    [8.0, 8.47],
                    [8.0, 7.04],
                    [8.0, 5.25],
                    [19.0, 12.5],
                    [8.0, 5.56],
                    [8.0, 7.91],
                    [8.0, 6.89]
                  ]
                ];
                const markLineOpt = {
                  animation: false,
                  // label: {
                  //   formatter: '111',
                  //   align: 'right'
                  // },
                  lineStyle: {
                    type: 'solid'
                  },
                  tooltip: {
                    formatter: '222'
                  },
                  data: [
                    [
                      {
                        coord: [0, 3],
                        symbol: 'none'
                      },
                      {
                        coord: [20, 13],
                        symbol: 'none'
                      }
                    ]
                  ]
                };
                let option = {
                    color:['#206EF7'],
                  title: {
                      text:'离散度标准差',
                      textStyle:{
                          fontWeight: 400,
                          fontSize: 13,
                          color: '#333333'
                      },
                      left:'3%'
                  },
                  tooltip: {
                    formatter: 'Group {a}: ({c})'
                  },
                  grid: {
                      right: '4%',
                      left: '10%',
                      top: '13%',
                      bottom:'15%',
                  },
                  xAxis: { 
                        gridIndex: 0, min: 0, max: 20,splitLine: {
                      lineStyle: {
                        type: 'dashed',
                        color:'#F7F8FA'
                      }
                    },
                    axisLine:{
                      lineStyle: {
                        color:'#C3CBD5'
                      }
                    } 
                    },
                  yAxis: { 
                  gridIndex: 0, min: 0, max: 15 ,
                  splitLine: {
                      lineStyle: {
                        type: 'dashed',
                        color:'#F7F8FA'
                      }
                    },
                    axisLine:{
                      show:false,
                      lineStyle: {
                        color:'#C3CBD5'
                      }
                    },
                    axisTick:{
                        show:false,
                    }
                },
                  series: [
                    {
                      name: 'I',
                      type: 'scatter',
                      xAxisIndex: 0,
                      yAxisIndex: 0,
                      data: dataAll[0],
                      markLine: markLineOpt
                    }
                  ]
                };
                var myChart = this.$echarts.init(document.getElementById(id));
                myChart.setOption(option);
                window.addEventListener("resize", function () {
                  myChart.resize();
                });
            },
            init_charts_module5(id){
                console.log(999,echarts.dataTool.prepareBoxplotData);
               let arrr = [
                          [19747,
                       50024,
                       64617,
                       86808,
                       159949,],
                          [23635,
                       46878,
                       58095,
                       84877,
                       158312,],
                       [21543,
                       47623,
                       61315.5,
                       85947,
                       159978,],
                       [18679,
                       46646,
                       59842,
                       84798.25,
                       159980,],
                       [15202,
                       43073.25,
                       55168.5,
                       80136.25,
                       159825,]
                   ]
                   let option = {
                   title: {
                       text:'离散度',
                       textStyle:{
                           fontWeight: 400,
                           fontSize: 13,
                           color: '#333333'
                       },
                       left:'3%'
                   },
                   tooltip: {
                       trigger: 'item',
                       axisPointer: {
                           type: 'shadow'
                       }
                   },
                   grid: {
                       right: '4%',
                       left: '10%',
                       top: '12%',
                       bottom:'15%',
                   },
                   xAxis: {
                       type: 'category',
                       data: ['Bottom','Low','Middle','High','Top'],
               
                       nameTextStyle: {
                           color: '#3259B8',
                           fontSize: 14,
                           
                       },
                       splitLine: {
                         lineStyle: {
                           type: 'dashed',
                           color:'#F7F8FA'
                         }
                       },
                       axisLine:{
                         lineStyle: {
                           color:'#C3CBD5'
                         }
                       }
                   },
                   
                   yAxis: {
                       type: 'value',
                      splitLine: {
                        lineStyle: {
                          type: 'dashed',
                          color:'#F7F8FA'
                        }
                      },
                      axisLine:{
                        show:false,
                        lineStyle: {
                          color:'#C3CBD5'
                        }
                      },
                      axisTick:{
                          show:false,
                      },
                       
                   },
                   series: [
                       {
                       name: 'boxplot',
                       type: 'pictorialBar',
                       symbolPosition: 'end',
                       symbolSize: 8,
                       data: [[0, 19747]]
                   },{
                   name: 'boxplot',
                   type: 'boxplot',
                   data: [
                              [19747,
                       50024,
                       64617,
                       86808,
                       159949,],
                          [23635,
                       46878,
                       58095,
                       84877,
                       158312,],
                       [21543,
                       47623,
                       61315.5,
                       85947,
                       159978,],
                       [18679,
                       46646,
                       59842,
                       84798.25,
                       159980,],
                       [15202,
                       43073.25,
                       55168.5,
                       80136.25,
                       159825,]
                       ],
                       itemStyle: {
                           normal:{
                               borderColor: '#206EF7',
                           borderWidth:2,
                       }
                       },
                       tooltip: {
                           formatter: function(param) {
                               return [
               
                                   '5: ' + param.data[5]  ,
                                   '4: ' + param.data[4],
                                   '3: ' + param.data[3],
                                   '2: ' + param.data[2],
                                   '1: ' + param.data[1]
                               ].join('<br/>')
                           }
                       }
               },
               
                       ]
                   };
                var myChart = this.$echarts.init(document.getElementById(id));
                myChart.setOption(option);
                window.addEventListener("resize", function () {
                  myChart.resize();
                });
            },
            init_charts_bubble(id){
                const data = [
                  [
                    [28604, 77, 17096869, 'Australia', 1990],
                    [31163, 77.4, 27662440, 'Canada', 1990],
                    [1516, 68, 1154605773, 'China', 1990],
                    [13670, 74.7, 10582082, 'Cuba', 1990],
                    [28599, 75, 4986705, 'Finland', 1990],
                    [29476, 77.1, 56943299, 'France', 1990],
                    [31476, 75.4, 78958237, 'Germany', 1990],
                    [28666, 78.1, 254830, 'Iceland', 1990],
                    [1777, 57.7, 870601776, 'India', 1990],
                    [29550, 79.1, 122249285, 'Japan', 1990],
                    [2076, 67.9, 20194354, 'North Korea', 1990],
                    [12087, 72, 42972254, 'South Korea', 1990],
                    [24021, 75.4, 3397534, 'New Zealand', 1990],
                    [43296, 76.8, 4240375, 'Norway', 1990],
                    [10088, 70.8, 38195258, 'Poland', 1990],
                    [19349, 69.6, 147568552, 'Russia', 1990],
                    [10670, 67.3, 53994605, 'Turkey', 1990],
                    [26424, 75.7, 57110117, 'United Kingdom', 1990],
                    [37062, 75.4, 252847810, 'United States', 1990]
                  ],
                  [
                    [44056, 81.8, 23968973, 'Australia', 2015],
                    [43294, 81.7, 35939927, 'Canada', 2015],
                    [13334, 76.9, 1376048943, 'China', 2015],
                    [21291, 78.5, 11389562, 'Cuba', 2015],
                    [38923, 80.8, 5503457, 'Finland', 2015],
                    [37599, 81.9, 64395345, 'France', 2015],
                    [44053, 81.1, 80688545, 'Germany', 2015],
                    [42182, 82.8, 329425, 'Iceland', 2015],
                    [5903, 66.8, 1311050527, 'India', 2015],
                    [36162, 83.5, 126573481, 'Japan', 2015],
                    [1390, 71.4, 25155317, 'North Korea', 2015],
                    [34644, 80.7, 50293439, 'South Korea', 2015],
                    [34186, 80.6, 4528526, 'New Zealand', 2015],
                    [64304, 81.6, 5210967, 'Norway', 2015],
                    [24787, 77.3, 38611794, 'Poland', 2015],
                    [23038, 73.13, 143456918, 'Russia', 2015],
                    [19360, 76.5, 78665830, 'Turkey', 2015],
                    [38225, 81.4, 64715810, 'United Kingdom', 2015],
                    [53354, 79.1, 321773631, 'United States', 2015]
                  ]
                ];
                let option = {
                  title: {
                      text:'离散度标准差',
                      textStyle:{
                          fontWeight: 400,
                          fontSize: 13,
                          color: '#333333'
                      },
                      left:'3%'
                  },
                  legend: {
                    right: '10%',
                    top: '0%',
                    data: ['正常电池模组', '异常电池模组']
                  },
                  grid: {
                    left: '8%',
                    bottom:'13%',
                    top: '12%'
                  },
                  xAxis: {
                    splitLine: {
                      lineStyle: {
                        type: 'dashed',
                        color:'#F7F8FA'
                      }
                    },
                    axisLine:{
                      lineStyle: {
                        color:'#C3CBD5'
                      }
                    }
                  },
                  yAxis: {
                    splitLine: {
                      lineStyle: {
                        type: 'dashed',
                        color:'#F7F8FA'
                      }
                    },
                    axisLine:{
                      show:false,
                      lineStyle: {
                        color:'#C3CBD5'
                      }
                    },
                    axisTick:{
                        show:false,
                    },
                    scale: true
                  },
                  series: [
                    {
                      name: '正常电池模组',
                      data: data[0],
                      type: 'scatter',
                      symbolSize: function (data) {
                        return Math.sqrt(data[2]) / 5e2;
                      },
                      emphasis: {
                        focus: 'series',
                        label: {
                          show: true,
                          formatter: function (param) {
                            return param.data[3];
                          },
                          position: 'top'
                        }
                      },
                      itemStyle: {
                        shadowBlur: 10,
                        shadowColor: 'rgba(32, 110, 247, .3)',
                        shadowOffsetY: 5,
                        color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                          {
                            offset: 0,
                            color: 'rgba(32, 110, 247, .3)'
                          },
                          {
                            offset: 1,
                            color: 'rgba(32, 110, 247, .3)'
                          }
                        ])
                      }
                    },
                    {
                      name: '异常电池模组',
                      data: data[1],
                      type: 'scatter',
                      symbolSize: function (data) {
                        return Math.sqrt(data[2]) / 5e2;
                      },
                      emphasis: {
                        focus: 'series',
                        label: {
                          show: true,
                          formatter: function (param) {
                            return param.data[3];
                          },
                          position: 'top'
                        }
                      },
                      itemStyle: {
                        shadowBlur: 10,
                        shadowColor: 'rgba(255, 47, 79, .3)',
                        shadowOffsetY: 5,
                        color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                          {
                            offset: 0,
                            color: 'rgba(255, 47, 79, .3)'
                          },
                          {
                            offset: 1,
                            color: 'rgba(255, 47, 79, .3)'
                          }
                        ])
                      }
                    }
                  ]
                };
                var myChart = this.$echarts.init(document.getElementById(id));
                myChart.setOption(option);
                window.addEventListener("resize", function () {
                  myChart.resize();
                });
            },
            init_nedw_trend(id,sohData) {
                console.log(sohData);
              let {future,history} = sohData
              future.map(e=>{
                  e.value = e.value*100
                  e.l = e.l*100
                  e.h = e.h*100
              })
              history.map(e=>{
                  e.value = e.value*100
              })
                let time = [...history,...future].map(e=>e.date)
              var base = -future.reduce(function (min, val) {
                return Math.floor(Math.min(min, val.l));
              }, Infinity);
              console.log(base);
              let data = {
                grid: {
                  left: '5%',
                  top: 50,
                  right: '5%',
                  bottom: 50,
                },
                tooltip: {
                  trigger: "axis",
                  axisPointer: {
                    type: "cross",
                    animation: false,
                    label: {
                      backgroundColor: "#ccc",
                      borderColor: "#aaa",
                      borderWidth: 1,
                      shadowBlur: 0,
                      shadowOffsetX: 0,
                      shadowOffsetY: 0,
                      color: "#222",
                    },
                  },
                  formatter: function (params) {
                    let res = params[0].axisValue
                    for (var i = 0; i < params.length; i++) {
                      if(params[i].data!=''){
                        if(params[i].seriesName=='预测' || params[i].seriesName=='真实'){
                          res += "<br>"+params[i].marker+params[i].seriesName+"："+(+params[i].data - base).toFixed(2) + "%";
                        }else if(params[i].seriesName == '最低'){
                          res += "<br>"+params[i].marker+params[i].seriesName+"："+(+params[i].data - base).toFixed(2) + "%";
                        }else if(params[i].seriesName == '最高'){
                          let num = params.filter(e=>e.seriesName == '最低')[0].data
                          console.log(+params[i].data+num , base);
                          let num2 = Math.floor((+params[i].data + num - base)*100)/100
                          num2 = num2>=100?99.99:num2
                          res += "<br>"+params[i].marker+params[i].seriesName+"："+ num2 + "%";
                        }
                      }
                    }
                    return res;
                  },
                },
                xAxis: {
                  type: "category",
                  data: time,
                  axisLabel: {
                    formatter: function (value, idx) {
                      var date = new Date(value);
                      return idx === 0
                        ? value
                        : [date.getMonth() + 1, date.getDate()].join("-");
                    },
                  },
                  axisTick: {
                    show: false,
                  },
                  boundaryGap: false,
                  splitLine: {
                    lineStyle: {
                      type: 'dashed',
                      color:'#C3CBD5'
                    }
                  },
                  axisLine:{
                    lineStyle: {
                      color:'#C3CBD5'
                    }
                  }
                },
                yAxis: {
                  type: "value",
                  max: 100+base,
                  axisLabel: {
                    formatter: function (val) {
                      return val - base + "%";
                    },
                  },
                  axisTick: {
                    show: false,
                  },
                  axisPointer: {
                    label: {
                      formatter: function (params) {
                        return (params.value - base).toFixed(1) + "%";
                      },
                    },
                  },
                  splitNumber: 3,
                  splitLine: {
                    lineStyle: {
                      color:'#C3CBD5'
                    }
                  },
                  axisLine:{
                    lineStyle: {
                      color:'#C3CBD5'
                    }
                  }
                },
                series: [
                  {
                    name: "最低",
                    type: "line",
                    data:(()=>{
                      let item = future.map( (item)=> item.l + base)
                     let item2 = history.map((e,i)=>{
                       let arrData = ''
                       if(i==history.length-1){
                         arrData = e.value + base
                       }
                       return arrData
                     })
                     return [...item2,...item]
                    })(),
                    smooth: true,
                    lineStyle: {
                      opacity: 0,
                    },
                    stack: "confidence-band",
                    symbol: "none",
                  },
                  {
                    name: "最高",
                    type: "line",
                    data:(()=>{
                      let item = future.map( (item)=> item.h - item.l)
                     let item2 = history.map((e,i)=>{
                       let arrData = ''
                       if(i==history.length-1){
                         arrData = 0
                       }
                       return arrData
                     })
                     return [...item2,...item]
                    })(),
                    smooth: true,
                    lineStyle: {
                      opacity: 0,
                    },
                    areaStyle: {
                      color: "RGBA(254, 234, 234, .6)",
                    },
                    stack: "confidence-band",
                    symbol: "none",
                  },
                  {
                    name:'预测',
                    type: "line",
                    data: (()=>{
                      let item = future.map( (item)=> item.value + base)
                     let item2 = history.map((e,i)=>{
                       let arrData = ''
                       if(i==history.length-1){
                         arrData =e.value +base
                       }
                       return arrData
                     })
                     return [...item2,...item]
                    })(),
                    smooth: true,
                    itemStyle: {
                      color: "#FF2F4F",
                    },
                    lineStyle: {
                        type: "dotted",
                      },
                    showSymbol: false,
                  },
                  {
                    name:'真实',
                    type: "line",
                    data: history.map(function (item) {
                      return item.value + base;
                    }),
                    smooth: true,
                    itemStyle: {
                      color: "#206EF7",
                    },
                    showSymbol: false,
                  },
                ],
              };
              var myChart2 = this.$echarts.init(document.getElementById(id));
              myChart2.setOption(data);
              window.addEventListener("resize", function () {
                myChart2.resize();
              });
            },
            handleTableChange(pagination, filters) {
                console.log(pagination, filters);
                const pager = {
                    ...this.pagination
                };
                pager.current = pagination.current;
                this.pagination = pager;
                this.fetch({
                    page: pagination.current,
                    limit: pagination.pageSize,
                    ...filters,
                });
            },
            fetch(params = {}) {
                // this.loading = true;
                // gets({
                //   ...params,
                //   ...(getSearchCriteria(this.searchData))
                // },'users').then(({ data }) => {
                //   if (data.code == 20000) {
                let res = {
                    data: [{
                        name1: '2023-06-20 18:18:18',
                        name2: '2#处理单元',
                        name3: '1#-1#',
                        name3: '温度太高',
                        name4: '4',
                        name5: '--',
                        name6: '--',
                        name7: '未处理',
                        name8: '2023-06-20 18:18:18',
                    }],
                    total: 20
                };
                this.data = res.data;
                this.pagination = {
                    total: res.total,
                };
                // }
                //   this.loading = false;
                // });
            },
            delData(id) {
                let _this = this
                this.$confirm({
                    title: "是否确定删除这条数据?",
                    content: "数据删除后将无法恢复",
                    okText: "确定",
                    okType: "danger",
                    cancelText: "取消",
                    onOk() {
                        del(id, 'users').then(({
                            data
                        }) => {
                            if (data.code == 20000) {
                                _this.$message.success("删除成功");
                                console.log(_this.pagination);
                                let i = 0;
                                if (_this.data.length == 1) {
                                    i = 1;
                                }
                                _this.fetch({
                                    limit: 10,
                                    page: _this.pagination.current - i
                                });
                            }
                        });
                    },
                    onCancel() {
                        console.log("Cancel");
                    },
                });
            },
            goupdata(id) {
                this.visible = true
                // this.$router.push(`/account/member/updata?id=${id}`);
            },
            goadd() {
                this.$router.push(`/account/member/add`);
            },
            onSearch() {
                this.fetch({
                    limit: 10
                })
            },
        },
    };
</script>

<style scoped lang="less">
    .pageHeader{
        height: 60px;
        display: flex;
        text-align: left;
        padding:0 23px;
        align-items: center;
        border-bottom: 1px solid #F7F8FA;
        .pageHeader_icon{
            text-align: center;
            width: 28px;
            height: 28px;
            line-height: 28px;
            background: #F7F8FA;
            border-radius: 50%;
            color: #B2BACB;
            cursor: pointer;
        }
        .pageHeader_title{
            font-size: 18px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #242C43;
            margin-left: 15px;
        }
    }
    .realTime_box{
        margin-top: 10px;
        .select_box{
            height: 40px;
            background: #F7F8FA;
            border-radius: 0px 4px 0px 0px;
            display: flex;
            margin-bottom: 15px;
            span{
                display: inline-block;
                line-height: 40px;
                padding: 0 15px;
                cursor: pointer;
                text-align: center;
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #7A8794;
            }
            .active{
                background-color: #fff;
                color: #206EF7;
            }
        }
        .realTime_title{
          height: 36px;
          background: #F7F8FA;
          border-radius: 4px 4px 0px 0px;
          text-align: left;
          line-height: 36px;
          display: flex;
          align-items: center;
          font-size: 14px;
          padding-right: 20px;
          .icon{
              display: inline-block;
              width: 20px;
              height: 20px;
              line-height: 20px;
              color: #1890ff;
              text-align: center;
              font-size: 14px;
              border-radius: 50%;
              background-color: #fff;
              border: 1px solid #1890ff;
              margin: 0 10px 0 26px;
          }
          .desc{
              
          }
          .btn{
              margin-left: auto;
              font-family: PingFang SC;
              font-weight: 500;
              color: #206EF7;
              cursor: pointer;
          }
      }  
        .status_box{
            display: flex;
            justify-content: space-between;
            padding: 20px 0;
            .status{
                display: flex;
                align-items: center;
                div{
                    margin-right: 20px;
                    .icon{
                        display: inline-block;
                        border: 4px solid red;
                        border-radius: 50%;
                        background-color: red;
                    }
                    .desc{
                        font-size: 14px;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #333333;
                        margin-left: 5px;
                    }
                }
            }
            .status_btn{
                background: #FFFFFF;
                border: 1px solid #E6EAF2;
                border-radius: 4px 0px 0px 4px;
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #6E7584;
                cursor: pointer;
                .btn{
                    display: inline-block;
                    padding: 9px 16px;
                }
                .btn:nth-of-type(1){
                    border-right: 1px solid #F7F8FA;
                }
                .active{
                    background: #F7F8FA;
                    color: #000000;
                }
            }
        }
        .bulletinBoard{
            .row4,.row5{
                display: flex;
                margin-bottom: 14px;
                gap:16px;
                span{
                    flex: 1;
                    display: inline-block;
                    text-align: center;
                    height: 66px;
                    line-height: 66px;
                    background: #16E6FF;
                    border-radius: 4px;
                }
            }
        
        }
    }
    
    
    
    
    .form_box{
        .form{
            display: flex;
            flex-wrap: wrap;
            .item{
                width: 33%;
            }
        }
        .addrecord{
            padding: 20px 0;
        }
    }
    .new-page {
        height: 100%;
        background-color: @base-bg-color;
        text-align: center;
        border-radius: 4px;

        .table_box {
            padding: 16px 23px;

            .table_header {
                display: flex;
                justify-content: space-between;
                padding-bottom: 24px;
            }
        }
    }
    .level1{
        color:#16E6FF ;
    }
    .level2{
        color: #FFE300;
    }
    .level3{
        color: #FF6600;
    }
    .level4{
        color: #FF2F4F;
    }
</style>
